import React, { Component } from 'react';
import { FormControl, Button, PanelGroup, Panel} from 'tinper-bee';

import { vendorsDanger as danger, vendorsSuccess as success, vendorsFmtDate as fmtDate } from 'utils/config.js';


import Checkbox from 'bee-checkbox';
import 'bee-checkbox/build/Checkbox.css';

import { initEnterpriseByPkOrgsReq } from './workarchives.config.js';
import './PersonnelEnterpriseModalContent.less';
import moment from 'moment';
moment.locale('zh-cn');

export default class PersonnelEnterpriseModalContent extends Component {
	constructor (props){
		super(props);
		let selectedPks = []
		let selectedRoles = []
		this.props.defaultChooseEnterprise.map((item, index)=>{
			selectedPks.push(item.pkEnterprise)
			selectedRoles.push(item.role)
		})
		this.state = {
			chooseValue: 10,
			enterpriseText: '' ,
			enterpriseList: {},
			roles :{
				10:'业主方',
				20:'施工方',
				30:'监理方',
				40:'设计方',
				50:'客户方',
			},
			defaultChooseEnterprise: selectedPks,
			selectItems :[],
			selectRoles :[],
			selectpks : selectedPks
		}
		
	}
	
	componentDidMount () {
		this.initEnterpriseByPkOrgs()
	}
	//根据组织查询企业信息
	initEnterpriseByPkOrgs  =() =>{
		
		initEnterpriseByPkOrgsReq({pkOrgs: this.props.pkOrgs ? [this.props.pkOrgs]: [] }).then((res)=>{
				this.spreadResByRoles(res.data.result)
		}).catch((error)=>{

		})
	}

	async spreadResByRoles (data){
		let resData = {
			10:[],
			20:[],
			30:[],
			40:[],
			50:[],
		};
		data.find((value, index, arr)=>{
			resData[value.role] && resData[value.role].push(value) 
		})
		
		await this.setState({
			enterpriseList : resData
		})
	}


	//查询区的onchange
	handlerSaveEnterpriseText = (e)=>{
		let value = e.target.value;
		this.setState({
			enterpriseText: value
		}, ()=>{
            this.scrollTo()
        });
	}

	handlerChooseEnterpriseItem = (checked, item, index) => {
		let saveEnterpriseItem = this.props.saveEnterpriseItem;
		let saveEnterpriseRole = this.props.saveEnterpriseRole;
		let {
			selectItems,
			selectRoles
		} = this.state;

	
		if(checked){
			let findIndex = selectItems.findIndex((itemSelect, indexSelect)=>{
				return itemSelect.pkEnterprise === item.pkEnterprise
			})

			if(findIndex!== -1){
				danger({'text': `已经选择[${item.name}]企业！`});
			}
			selectItems.push(item);
			selectRoles.push(item.role ? item.role.toString() : item.entRole.toString())
		}else{
			let findIndex = selectItems.findIndex((itemSelect, indexSelect)=>{
				return itemSelect.pkEnterprise === item.pkEnterprise
			})
			if(findIndex!== -1){
				selectItems.splice(findIndex, 1)
				selectRoles.splice(findIndex, 1)
			}
		}
		if(saveEnterpriseItem){

			saveEnterpriseRole(selectRoles);
			saveEnterpriseItem(selectItems);
			
		}
		let selectkeys = []
		
		selectItems.map((enterItem)=>{
			selectkeys.push( enterItem.pkEnterprise)
		})
		this.setState({
			selectRoles : selectRoles,
			selectItems ,
			selectpks : selectkeys.concat(this.state.defaultChooseEnterprise)
		});
	}

	mapPanel = () => {
		let{
			roles,
			enterpriseList
		} = this.state;
		return (
			<div>
				{
					Object.keys(enterpriseList).map((key,index)=>{
						return(
							<Panel header={roles[key]} >{this.contentPanel(enterpriseList[key])}</Panel>
						)
					})
				}
				
			</div>
		)
		
		
		
		
	}

	contentPanelGroup = () =>{
		return(
			<PanelGroup  className = {"panel-group-cus"}>
				{
					this.mapPanel()
				}
            </PanelGroup>
		)
	}

	contentPanel = data =>{
		let _me = this;
        let {
			enterpriseText,
			defaultChooseEnterprise
        } = _me.state;
		return(
			<div className={"panel-cus"}  >
				{data.map((item, index)=>{
					return(
						<Checkbox 
							className={"checkbox-cus"} 
							value = {item.pkEnterprise}
							item = {item}
							label = {item.name}
							key = {item.pkEnterprise}
							disabled =  {_me.state.defaultChooseEnterprise.includes(item.pkEnterprise)}
							checked = {_me.state.selectpks.includes(item.pkEnterprise)}
							onChange = {(checked)=>{_me.handlerChooseEnterpriseItem(checked, item, index, )}}
						>
							<span id={item.pkEnterprise} style={{color: enterpriseText &&item.name.includes(enterpriseText) ? "#ff5f5f" :'#000'}}>
                                {item.name}
                            </span>
						</Checkbox>
					)
				})}
			</div>
		)
	}

    scrollTo = () =>{
        let {
            enterpriseText,
            enterpriseList
		} = this.state;
		Object.keys(enterpriseList).map((key,index)=>{
			enterpriseList[key].map((roleItem, roleIndex)=>{
                if( enterpriseText && roleItem.name.includes(enterpriseText)){//搜索的包含在角色数据里
                    document.getElementById(roleItem.pkEnterprise).scrollIntoView()
                }
            })
		})
    }

	render (){
		return (
			<div className="personnelenterprise--tab">
				<FormControl 
					size="lg" 
					placeholder={`请输入姓名、电话、邮箱、企业名称`} 
					onChange={this.handlerSaveEnterpriseText} 
					value={this.state.enterpriseText}
				/>
				<PanelGroup className = {"panel-group-cus"}>
					{
						this.mapPanel()
					}
				</PanelGroup>
				
			</div>
			)
	}
}